import { Tabs, WhiteSpace } from 'antd-mobile';
import React, { Children, useState, useEffect, useCallback } from 'react';
import TopItem from './TopItem'
import { TopbarWrapper, TopUlWrapper } from './styledTopbar'
import ShowList from '../showList/ShowList';
import { useDispatch } from 'react-redux'
import { getlist } from '@/views/home/buy/index'
import { useSelector } from 'react-redux'

function TopBar({ children }) {
  // console.log(children);
  const [currentIndex, setCurrentIndex] = useState(0)

  const tabs = [
    { title: '推荐' },
    { title: '鞋类' },
    { title: '潮服' },
    { title: '手表' },
    { title: '箱包' },
    { title: '配饰' },
    { title: '潮玩' },
    { title: '运动' },
    { title: '数码' },
    { title: '美妆' },
    { title: '女装' },
  ];




  const handleClick = useCallback(
    (value, currentIndex) => {
      setCurrentIndex(currentIndex)
    }
  )
  const list = useSelector(state => state.getIn(['buy', 'list']))

  const divStyle = {
    border: "none"
  };

  return (
    <TopbarWrapper>
      {/* <StickyContainer> */}
      <Tabs tabs={tabs}
        onTabClick={handleClick}
        tabBarUnderlineStyle={divStyle}
        tabBarActiveTextColor='black'
        tabBarInactiveTextColor='#B1B1C1'
        tabBarPosition='top'
      >
      </Tabs>
      {children[currentIndex].props.children}
      {/* </StickyContainer> */}
    </TopbarWrapper>
  );
}
TopBar.Item = TopItem
export default TopBar

